<template>
	<div>
		<div class="testbg"></div>
		<el-button type="primary" size="default" @click="uClass">测试 类 class</el-button>

		<h4>v-slot：几个版本的变化</h4>
		<el-divider></el-divider>
		<h5>2.6- 老方法: slot="header" slot-scope="slotProps"</h5>
		<d-slot :value="dSlot">
			<!-- 正确的写法 -->
			<!-- <template slot="header" slot-scope="slotProps">
        <div>
          {{ slotProps }}
        </div>
      </template> -->
			<!-- 简洁的写法 -->
			<div slot="header" slot-scope="slotProps">
				{{ slotProps }}
			</div>
		</d-slot>
		<el-divider></el-divider>
		<h5>2.6+ 新方法 v-slot</h5>
		<d-slot :value="dSlot">
			<!-- 不传数据的 -->
			<!-- <template v-slot:header>
        <div>abc</div>
      </template> -->
			<!-- 传数据的 -->
			<!-- <template v-slot:header="data">
        <div>{{ data }}</div>
      </template> -->
			<!-- 精简写法 -->
			<!-- <template #header="scope">
        <span>{{ scope.row }}</span>
        <el-button type="primary" size="default" @click="handleClick(scope)">查看</el-button>
      </template> -->
			<template #header="{ row }">
				<span>{{ row }}</span>
				<el-button type="primary" size="default" @click="handleClick(row)">查看</el-button>
			</template>
		</d-slot>
		<el-table :data="tableData" border style="width: 100%">
			<el-table-column fixed prop="date" label="日期"> </el-table-column>
			<el-table-column fixed prop="date" label="日期">
				<template #default="scope">
					<el-button @click="handleClick(scope)" type="text" size="small">查看</el-button>
					<el-button type="text" size="small">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		<test />
	</div>
</template>

<script>
	import { useClass } from '@/utils/useClass'
	import dSlot from './components/slot'
	import test from './components/test'
	export default {
		components: { dSlot, test },
		data() {
			return {
				key: 'value',
				dSlot: [
					{ id: 1, name: '01' },
					{ id: 2, name: '02' }
				],
				tableData: [
					{
						date: '2016-05-02',
						name: '王小虎',
						province: '上海',
						city: '普陀区',
						address: '上海市普陀区金沙江路 1518 弄',
						zip: 200333
					}
				]
			}
		},
		// beforeCreate() {
		//   console.log('父beforeCreate')
		// },
		// created() {
		//   console.log('父created')
		// },
		// beforeMount() {
		//   console.log('父beforeMount')
		// },
		// mounted() {
		//   console.log('父mounted')
		// },
		methods: {
			handleClick(e) {
				console.log(e)
			},
			uClass() {
				let a = useClass()
				console.log(a)
				// console.log(a)
				console.log(a.change())
				console.log(a.oChange())
				console.log(a)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.testbg {
		width: 200px;
		height: 200px;
		// background-color: aquamarine;
		background: url('../../assets/images/15.png');
	}
</style>
